<!doctype html>
<title>container-type invalidation</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-type">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
  div {
    color: black;
  }
  #outer {
    width: 300px;
  }

  #intermediate {
    width: 250px;
  }

  #inner {
    width: 200px;
  }

  .container {
    container-type: inline-size;
  }

  @container ((max-width: 200px) or (min-width: 300px)) {
    #child { color: green; }
  }

</style>
<div id=outer>
  <div id=intermediate>
    <div id=inner>
      <div id=child>Test</div>
    </div>
  </div>
</div>
<script>
  setup(() => assert_implements_container_queries());

  test(function(t) {
    t.add_cleanup(() => {
      for (let e of [outer, intermediate, inner])
        e.classList.remove('container');
    });

    // No container.
    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');

    outer.classList.add('container');
    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');

    // The container query does not match widths in the range [201, 299],
    // and #intermediate has width:250px.
    intermediate.classList.add('container');
    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');

    inner.classList.add('container');
    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');

    // Should have no effect, #inner is the container.
    outer.classList.remove('container');
    intermediate.classList.remove('container');
    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');

    inner.classList.remove('container');
    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
  }, 'Changing the container type invalidates relevant descendants');
</script>
